<template>
	<view>
		<view class="relate-phone-container d-flex a-center j-center">
			<text class="font-30">当前绑定的手机号：{{userInfo.mobile}}</text>
		</view>
		<view class="register-form">
			<view class="sun-form-item border-bottom">
				<text class="sun-label">设置密码</text>
				<input v-model="infoData.newPwd" type="text">
			</view>
			<view class="sun-form-item border-bottom">
				<text class="sun-label">输入验证码</text>
				<input v-model="infoData.captcha" type="text">
				<text v-if="!isShowCountDown" class="sun-veri-code" @tap="getCaptcha">获取验证码</text>
				<text class="sun-veri-code" v-else>{{countDown}}秒后可重新发送</text>
			</view>
			<view class="sun-btn">
				<text class="font-30" @tap="skipToResetPage">确认修改密码</text>
			</view>
			<view class="d-flex j-center a-center" style="margin-top: 64upx;">
				<text style="color: #999999;">旧手机无法使用？点此 </text><text style="color: #005BAC;">联系我们</text>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '@/common/lib/request.js';
	export default {
		data() {
			return {
				infoData:{
					newPwd: "",   //新密码
					captcha: ""   //验证码
				},
				userInfo: null,
				isShowCountDown: false,
				passAuth: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/,
				countDown: 60
			}
		},
		onLoad() {
			let userInfo = uni.getStorageSync('userInfo');
			this.userInfo = JSON.parse(userInfo);
		},
		onShow(){
			
		},
		methods: {
			skipToResetPage(){
				let _this = this;
				//缺少正则验证
				if(!this.infoData.newPwd.trim() || !this.infoData.captcha.trim()){
					uni.showToast({
						title: '请确密码和验证码已填写！',
						icon: 'none'
					});
					return
				}
				if (!this.passAuth.test(this.infoData.newPwd)) {
					uni.showToast({
						title: '请检查密码格式是否正确',
						icon: 'none'
					})
					return
				}
				api.request({
						url: '/resetPassword',
						method: 'POST',
						data: {
							newPassword: _this.infoData.newPwd,
							mobile: _this.userInfo.mobile,
							captcha: _this.infoData.captcha
						}
					})
					.then(response => {
						uni.showToast({
							title: '密码修改成功',
							icon: 'none'
						});
						uni.removeStorageSync('token')
						uni.removeStorageSync('userInfo')
						uni.redirectTo({
							url: '/pages/mine/login/login'
						});
					})
					.catch(err => {
						console.log(err);
						uni.showToast({
							title: '密码修改失败',
							icon: 'none'
						})
					})
			},
			/**
			 * 获取验证码
			 */
			getCaptcha(){
				const _this = this;
				api.request({
						url: '/captcha',
						data: {
							mobile: _this.userInfo.mobile,
							type: 3
						}
					})
					.then(response => {
						uni.showToast({
							title: '验证码已发送',
							icon: 'none'
						})
						_this.isShowCountDown = true;
						_this.countDown = 60;
						let timer = setInterval(() => {
							if(_this.countDown > 0){
								_this.countDown--;
							}else{
								clearInterval(timer)
								_this.isShowCountDown = false;
								_this.countDown = 60;
							}
						},1000)
					})
					.catch(err => {
						console.log(err);
					});
			}
		}
	}
</script>

<style scoped>
.relate-phone-container{
	width: 100%;
	height: 150rpx;
}
.register-form{
	width: 570upx;
	padding: 20upx 100upx;
}
.sun-form-item{
	display: flex;
	margin-bottom: 20upx;
	height: 80upx;
	align-items: center;
}
.sun-form-item .sun-label{
	width: 160upx;
	color: #999999;
	font-size: 30upx;
}
.sun-form-item input{
	flex: 1;
	font-size: 28upx;
}
.sun-btn{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 550upx;
	height: 86upx;
	margin-top: 120upx;
	background-color: #005BAC;
	color: white;
}
.sun-veri-code{
	color:#005BAC;
	font-size: 28upx;
}
</style>


